<template>
	<div>
		<div class="spots-search-wrap">
			<div class="spots-search">
				<group class="spots-input">
					<x-input title="所在地" :max="10" placeholder="请输入景点所在地"></x-input>
					<x-input title="景点关键词" :max="10" placeholder="请输入景点关键词"></x-input>
				</group>
				<x-button type="warn" @click="spots" class="search-btn">查询</x-button>
			</div>
		</div>
		<div class="spots-hot">
			<h2>热门景点</h2>
			<ul>
				<li v-for="item in hot"><div><img :src="item.image"><span>{{item.name}}</span></div></li>
			</ul>
		</div>
		<c_sidemenu></c_sidemenu>
	</div>
</template>

<script>
export default {
	data () {
		return {
			hot: [
				{
					name: '琅琊山',
					image: '/static/images/jd1.jpg',
					link: ''
				},
				{
					name: '醉翁亭',
					image: '/static/images/jd2.jpg',
					link: ''
				},
				{
					name: '喜洲',
					image: '/static/images/jd3.jpg',
					link: ''
				},
				{
					name: '挖色',
					image: '/static/images/jd4.jpg',
					link: ''
				},
				{
					name: '双廊',
					image: '/static/images/jd5.jpg',
					link: ''
				},
				{
					name: '泸沽湖',
					image: '/static/images/jd6.jpg',
					link: ''
				}
			]
		}
	}
}
</script>

<style>
	.spots-hot{padding: .6rem;}
	.spots-hot h2{padding-bottom: .3rem;}
	.spots-hot ul{display: flex;-webkit-flex-flow: wrap;}
	.spots-hot li{-webkit-flex:auto;-webkit-box-sizing: border-box;-webkit-flex-basis: 50%;padding: .3rem 0;}
	.spots-hot li:nth-child(even){padding-left: .3rem;}
	.spots-hot li:nth-child(odd){padding-right: .3rem;}
	.spots-hot li>div{position: relative;width: 100%;height: 100%;border-radius: 5px;overflow: hidden;}
	.spots-hot li>div:after{content: '';display: block;padding-top: 68%;}
	.spots-hot li img{position: absolute;max-width: initial;height: 100%;left: 50%;transform: translateX(-50%);}
	.spots-hot span{position: absolute;top:50%;left: 50%;transform: translate(-50%, -50%); color: #fff;text-shadow: 1px 1px 2px #000;}
</style>